<template>
    <div class="mine_parent">
        <!-- 头像部分 -->
        <div class="avatar">
            <!-- 左侧头像 用户 -->
            <div class="username">
                <!-- 头像 -->
                <div class="left">
                    <van-image round width="3rem" height="3rem"
                        src="https://q6.itc.cn/q_70/images03/20250214/a3e2e1fb815e40f8bcf61e7c8b6c8e5f.jpeg" />
                </div>
                <!-- 文字 -->
                <div class="right" style="margin-left: 10px;">
                    <div style="font-weight: bold;font-size: 14px;font-family:'楷体';">可乐不加冰</div>
                    <div>
                        <van-button size="small" style="height:20px;" plain round type="default">Lv8.0</van-button>
                    </div>
                </div>
            </div>
            <!-- 右侧箭头 -->
            <div class="icon">
                <van-icon name="arrow" size="20" />
            </div>
        </div>
        <!-- 完成宫格部分 -->
        <div class="grid" style="margin-top: 20px;">
            <van-grid square :border="false">
                <van-grid-item icon-color="red" v-for="item in gridList" :key="item.id" :icon="item.icon"
                    :text="item.text" />
            </van-grid>
        </div>
        <!-- 我喜欢的音乐 -->
        <div class="music">
            <div class="left" style="display: flex;">
                <!-- 图标 -->
                <div class="icon">
                    <van-icon name="like" color="#fff" />
                </div>
                <!-- 我喜欢音乐文字 -->
                <div class="text" style="margin-left:10px;">
                    <div style="font-weight: bold;margin-bottom: 6px;">我喜欢的音乐</div>
                    <div style="color: #736d6d;font-size: 12px;">666首</div>
                </div>
            </div>
            <div class="right">
                <van-button size="mini" icon="fire" plain round type="default">心动模式</van-button>
            </div>
        </div>

        <!-- 收藏歌单 -->
        <div class="card" style="margin-top: 10px;">
            <van-tabs v-model:active="active" animated color="red" background="#f4f4f4">
                <van-tab title="创建歌单" name="a">
                    <div class="tab">
                        <div class="top">
                            <div class="left" style="font-size: 12px;color: #736d6d;">创建歌单(3个)</div>
                            <div class="right">
                                <van-icon name="plus" color="#736d6d" size="18"></van-icon>
                                <van-icon name="bars" color="#736d6d" size="18" style="margin-left: 5px;"></van-icon>
                            </div>
                        </div>
                        <div class="bottom" v-for="item in playList" :key="item.id">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url" alt="">
                            </div>
                            <div class="right">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                                <div style="font-size: 12px;color: #736d6d;margin-top: 3px;">{{ item.num }}首</div>
                            </div>
                        </div>  
                    </div>
                </van-tab>
                <van-tab title="收藏歌单" name="b">
                    <div class="tab">111</div>
                </van-tab>
                <van-tab title="歌单助手" name="c">
                    <div class="tab">111</div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const active = ref('a');
// 声明宫格数组
const gridList = ref([
    { id: 1, icon: "shop", text: '本地音乐' },
    { id: 2, icon: "shop-collect", text: '云盘' },
    { id: 3, icon: "goods-collect", text: '已购' },
    { id: 4, icon: "play-circle", text: '最近播放' },
    { id: 5, icon: "friends", text: '我的关注' },
    { id: 6, icon: "star", text: '收藏和赞' },
    { id: 7, icon: "volume", text: '我的播客' },
    { id: 8, icon: "music", text: '音乐应用' },
]);
// 定义一个创建歌单的数组
const playList = ref([
    {id:1,url:"https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg",name:'90后回忆录',num:'30'},
    {id:2,url:"https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:'车载音乐',num:'50'},
    {id:3,url:"https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg",name:'助眠神曲',num:'70'},
]);
</script>
<style lang="less" scoped>
.mine_parent {
    height: calc(100vh - 32px);
    background-color: #f4f4f4;
    padding: 10px;

    // 头像样式
    .avatar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .username {
            display: flex;
        }
    }

    // 宫格样式
    .grid {
        border-radius: 10px;
        overflow: hidden;
    }

    // 我喜欢的音乐样式
    .music {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;

        .icon {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            background-image: url(https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800);
            // 设置背景图片尺寸 宽 高
            background-size: 100% 100%;
        }
    }
    // 收藏歌单
    .card{
        background-color: #fff;
        .tab{
            padding: 5px;
            .top{
                padding: 10px;
                display: flex;
                justify-content: space-between;
            }
            .bottom{
                padding: 10px;
                display: flex;
                .left{
                    margin-right: 10px;
                    img{
                        border-radius: 5px;
                    }
                }
            }
        }
    }
}
</style>